<template>
	<view class="shop-manage">
		<NavBar title="商户管理"/>
		<view class="content">
			<view class="switch-bar">
				<view @tap="tapType(item.status)" v-for="item in shopCount" :key="item" class="switch-item" :class="typeStatus==item.status?'a-item':''"> {{item.name}} </view>
			</view>
			<!-- shop list -->
			<view class="shop-list" v-if="shopList.length">
				<view class="shop-item" v-for="(item, index) in shopList" :key="item">
					<view class="shop-status">
						<view class="status" :class="item.active==1?'a-status':''"> {{ item.active==1&&item.open_status==1?'营业中':item.active==1&&item.open_status==2?'休息中':'已关闭' }} </view>
						<!-- //active==1 && open_status==1营业中 active==1 && open_status==2休息中 active==0  已关闭 -->
						<view class="btn" @tap="editShopStatus(item, index)"> {{item.active==1?'停业整顿':'店铺营业'}} </view>
					</view>
					<view class="shop-info" @tap="goShopDetails(item.id)">
						<image :src="item.logo" class="shop-avatar" />
						<view class="shop-details">
							<view class="shop-name"> {{item.name}} </view>
							<view class="shop-pf">
								<view>{{item.comment_score}}分</view> <view>销售 {{item.goods_sales}}</view> <view>4.6km</view>
							</view>
							<view class="shop-address">地址：{{item.detail_address}}</view>
						</view>
					</view>
				</view>
			</view>
			<Empty txt="空空如也~~~" v-else/>	
		</view>
		<Modal ref="modalRef" tips="是否对该店铺进行停业整顿操作？" @confirm="reject"/>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import Modal from '@/components/Modal.vue';
	import Empty from '@/components/Empty.vue'
	import { GetShopManageCountApi, GetShopManageListApi, SetShopStatusApi } from '@/service/agent.js'
	const modalRef = ref()
	const typeStatus = ref(0) // 选中的类别
	const shopCount = ref([]) // 商户统计[顶部切换栏]
	const shopList = ref([])
	const tapType = (status) => {
		typeStatus.value = status
		getShopList()
	}
	// 停业整顿
	const reject = () => {
		let params = {
			shop_id: checkedId.value,
			active: 2
		}
		SetShopStatusApi(params).then(res => {
			getShopCount()
			modalRef.value.close()
		})
	}
	// 店铺停业/营业
	const checkedId = ref() // 选中的商户id
	const editShopStatus = (info, index) => {
		if(info.active == 1) {
			checkedId.value = info.id
			modalRef.value.open()
		} else {
			let params = {
				shop_id: info.id,
				active: 1
			}
			SetShopStatusApi(params).then(res => {
				getShopCount()
			})
		}
	}
	const goShopDetails = (id) => {
		uni.navigateTo({
			url: `/pages/agentPages/shopManage/shopDetails/shopDetails?id=${id}`
		})
	}
	// 获取商户管理统计
	const getShopCount = () => {
		GetShopManageCountApi().then(res => {
			shopCount.value = res
			typeStatus.value = res[0].status
			getShopList()
		})
	}
	// 获取商户管理列表
	const getShopList = () => {
		let params = {
			status: typeStatus.value,
			longitude: "113.54",
			latitude: "34.81213",
		}
		GetShopManageListApi(params).then(res => {
			shopList.value = res.data
		})
	}
	// 商户停业/营业
	const setShopStatus = () => {
		SetShopStatusApi()
	}
	onLoad(() => {
		getShopCount()
	})
</script>

<style lang="scss" scoped>
	.shop-manage {
		.content {
			padding: 0 12px 10px;
			.switch-bar {
				display: flex;
				padding-bottom: 9px;
				.switch-item {
					flex: 1;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
					text-align: center;
					&.a-item {
						color: #FF3B1E;
						font-size: 15px;
						font-weight: 500;
						line-height: 19px;
						position: relative;
						&::before {
							position: absolute;
							bottom: -8px;
							left: 50%;
							transform: translateX(-50%);
							display: block;
							content: '';
							width: 30px;
							height: 4px;
							border-radius: 33px;
							background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
						}
					}
				}
			}
			.shop-list {
				padding-top:  10px;
				.shop-item {
					padding: 10px 12px;
					border-radius: 10px;
					background-color: #fff;
					box-sizing: border-box;
					margin-bottom: 10px;
					.shop-status {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 12px;
						border-bottom: 1px solid #eeeeee;
						.status {
							font-weight: 400;
							font-size: 14px;
							color: #999999;
							line-height: 17px;
							&.a-status {
								color: #4CD995;
							}
						}
						.btn {
							width: 68px;
							height: 22px;
							color: #333333;
							font-size: 12px;
							font-weight: 400;
							line-height: 22px;
							text-align: center;
							background: #FFFFFF;
							border-radius: 151px;
							border: 1px solid #999999;
						}
					}
					.shop-info {
						display: flex;
						padding-top: 10px;
						.shop-avatar {
							width: 80px;
							height: 80px;
							margin-right: 10px;
							border-radius: 10px;
						}
						.shop-details {
							.shop-name {
								color: #333333;
								font-size: 16px;
								font-weight: 500;
								line-height: 19px;
								margin-bottom: 4px;
							}
							.shop-pf {
								display: flex;
								align-items: center;
								color: #999999;
								font-size: 12px;
								font-weight: 400;
								line-height: 17px;
								margin-bottom: 4px;
								view:nth-of-type(1) {
									color: #FF3B1E;
								}
								view:nth-of-type(2) {
									margin: 0 10px;
								}
							}
							.shop-address {
								color: #666666;
								font-size: 14px;
								font-weight: 400;
								line-height: 20px;
							}
						}
					}
				}
			}
		}
	}
</style>
